<template>
  <div>
    <!-- 需求: 点击按钮, 把文字翻转显示 -->
    <!-- 
      分析:
      1. 给按钮绑定点击事件
      2. 点击后将 msg 字符串转成数组
      3. 将数组进行翻转
      4. 再将翻转后的数组转成字符串
      5. 将字符串覆盖给 msg
     -->
    <p>{{ msg }}</p>
    <button @click="rev">翻转世界</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'HELLO, WORLD'
    }
  },
  methods: {
    rev() {
      // console.log('我被点了')
      // 访问 data 中的数据要加 this
      const arr = this.msg.split('')
      // console.log(arr.reverse().join(''))
      this.msg = arr.reverse().join('')

      // 如果希望一行写完
      // this.msg = this.msg.split('').reverse().join('')
    }
  }
}
</script>

<style>

</style>